<template>
  <div class="player-container">
    <el-button @click="goBack" type="primary" plain>返回首页</el-button>
    
    <div class="player-wrapper">
      <h2>Lomo帧播放器演示</h2>
      <Index
        :images="lomoFrameData"
        :fps="30"
        width="800"
        height="450"
        :autoplay="true"
        :showControls="true"
        :loop="true"
        @update="onLomoFrameUpdate"
      />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Index from '@/components/lomoFramePlayer/Index.vue'

export default {
  name: 'Player',
  setup() {
    const router = useRouter()
    
    // Lomo帧播放器数据
    const lomoFrameData = ref([
      'https://picsum.photos/seed/lomo1/800/450.jpg',
      'https://picsum.photos/seed/lomo2/800/450.jpg',
      'https://picsum.photos/seed/lomo3/800/450.jpg',
      'https://picsum.photos/seed/lomo4/800/450.jpg',
      'https://picsum.photos/seed/lomo5/800/450.jpg',
      'https://picsum.photos/seed/lomo6/800/450.jpg',
      'https://picsum.photos/seed/lomo7/800/450.jpg',
      'https://picsum.photos/seed/lomo8/800/450.jpg',
      'https://picsum.photos/seed/lomo9/800/450.jpg',
      'https://picsum.photos/seed/lomo10/800/450.jpg',
    ])
    
    const goBack = () => {
      router.push('/')
    }
    
    // Lomo帧播放器事件处理
    const onLomoFrameUpdate = (frame) => {
      console.log('Lomo帧播放器当前帧:', frame)
    }
    
    return {
      lomoFrameData,
      goBack,
      onLomoFrameUpdate
    }
  }
}
</script>

<style scoped>
.player-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.player-wrapper {
  margin-top: 20px;
  text-align: center;
}

h2 {
  margin-bottom: 20px;
  color: #409EFF;
}
</style>